<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            font-family: '微软雅黑';
        }
        body {
            margin: 0;
            padding: 0;
             background-color: deepskyblue;
            /*background: url('/img/loginBroung.jpg') no-repeat center /100% 100%;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            margin: 0;
            padding: 50px;
            padding-top: 0px;
            list-style: none;
        }

        .register {
            width: 800px;
            background-color: #F9F9F9;
            border: 1px solid #CCC;
            border-radius: 5px;
        }

        li {
            display: flex;
            margin: 20px 0;
        }

        label,
        input {
            display: block;
            float: left;
            height: 46px;
            font-size: 20px;
            box-sizing: border-box;
            color: #333;
        }

        label {
            width: 200px;
            line-height: 46px;
            margin-right: 30px;
            text-align: right;
        }

        input {
            width: 320px;
            padding: 8px;
            line-height: 1;
            outline: none;
            position: relative;
        }

        input.code {
            width: 120px;
        }

        input.verify {
            width: 190px;
            margin-left: 10px;
        }

        input.disabled {
            background-color: #CCC !important;
            cursor: not-allowed !important;
        }

        input[type=button] {
            border: none;
            color: #FFF;
            background-color: deepskyblue;
            border-radius: 4px;
            cursor: pointer;
        }

        .tips {
            width: 100%;
            height: 40px;
            text-align: center;
        }

        .tips p {
            min-width: 300px;
            max-width: 400px;
            line-height: 40px;
            margin: 0 auto;
            color: #FFF;
            display: none;
            background-color: #C91623;
        }

        .submit:disabled {
            background-color: gray;
            cursor: not-allowed;
        }

        span {
            line-height: 46px;
            padding-left: 20px;
            font-size: 20px;
            color: yellowgreen;
            text-shadow: 0 0 20px yellowgreen;
        }
        #ab{
            float: right;
            margin-right: 60px;
            margin-bottom: 100px;
        }
        #h{
            margin-top: 5px;
        }
    </style>

</head>
<body>
<div class="register">
    <form  action="/adduser" method="post" enctype="multipart/form-data">
        <center>
            <h1 id="h">全国手球运动员注册</h1>
        </center>
        <ul>
            <li>
                <label for="">用户名:</label>
                <input type="text" name="username"  placeholder="请输入用户名" id="username">
            </li>
            <li>
                <label for="">手机号:</label>
                <input type="text" name="userphone"  placeholder="请输入手机号" id="userphone">
            </li>
            <li>
                <label for="">短信验证码</label>
                <input type="text" name="code" class="code" id="code" onblur="yzm()">
                <input type="button" value="获取验证码" class="verify" onclick="getCode()">
            </li>
            <li>
                <label for="">请输入密码:</label>
                <input type="password" name="userpwd"  placeholder="请输入密码" id="pwd1" class="password-field">
            </li>
            <li>
                <label for="">请确认密码:</label>
                <input type="password"    placeholder="请确认密码" id="pwd2" onblur="qr()">
            </li>
            <li>
                <label for="">头像</label>
<!--                <input type="file" name="userimg"  id="userimg">-->
                <div id="localImag"><img id="preview" class="img-circle" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
                <input type="file" name="userimg" id="doc" style="width:150px;" class="btn btn-primary" onchange="javascript:setImagePreview();" >
            </li>
            <li>
                <label for=""></label>
                <input type="submit" value="立即注册">
            </li>
        </ul>
        <a href="/admin" id="ab" >已有账号？立即登录</a>
    </form>
</div>

</body>
<script>

    function qr() {
        var pwd1=$("#pwd1").val();
        var  pwd2=$("#pwd2").val();
        if(pwd1!=pwd2){
            alert("两次密码不一致，请重新输入");
        }
    }
    function yzm() {
        var code2=$("#code").val();
        if(code!=code2){
             alert("验证码不一致，请重新发送短信")
        }
    }

    var  code ="";
    function getCode(res) {
        // var phone=$("#phone").val();
        $.ajax({
            url: "getYzm",
            data: {},
            async:false,
            success:function (res) {
                if(res){
                    console.log(res);
                    code=res;
                    alert("您的验证码为:"+res);
                }
            }
        })
    }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script>
    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if(docObj.files && docObj.files[0])
        {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
        else
        {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag"); //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch(e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>

</body>
</html>